<template>
    <div >
        <h1>{{LearnStatistics.name}}</h1>
        <el-card v-loading="loading">
            <span>党史学习教育统计</span>
            <el-divider></el-divider>
            <el-alert
                title="按照上级要求，此处的完成数和开展数应该为1。您需要把下列的所有主题开展次数都为1，本栏目就会显示已完成。"
                type="success"
                show-icon
                :closable="false">
            </el-alert>
            <div class="xx-tags">
                <xx-tag title="团支部总数" :content="LearnStatistics.totalCountBoTotalLeagueMember"></xx-tag>
                <xx-tag title="已完成总数" :content="LearnStatistics.totalCountBoFinishedLeagueMember"></xx-tag>
                <xx-tag title="已开展总数" :content="LearnStatistics.totalCountBoOpenLeagueMember"></xx-tag>
            </div>
        </el-card>
        <el-card v-loading="loading">
            <span>新民主主义革命主题</span>
            <el-divider></el-divider>
            <el-alert
                title="按照上级要求，此处的完成数和开展数应该为1。"
                type="success"
                show-icon
                :closable="false">
            </el-alert>
            <div class="xx-tags">
                <xx-tag title="开展次数" :content="LearnStatistics.newDemocracyOpenMember"></xx-tag>
                <xx-tag title="覆盖团员数" :content="LearnStatistics.newDemocracyCountBoTotalCoverLeagueMember"></xx-tag>
                <xx-tag title="覆盖青年数" :content="LearnStatistics.newDemocracyCountBoTotalCoverYouthMember"></xx-tag>
            </div>
        </el-card>
        <el-card v-loading="loading">
            <span>社会主义革命和建设专题</span>
            <el-divider></el-divider>
            <el-alert
                title="按照上级要求，此处的完成数和开展数应该为1。"
                type="success"
                show-icon
                :closable="false">
            </el-alert>
            <div class="xx-tags">
                <xx-tag title="开展次数" :content="LearnStatistics.socialOpenMember"></xx-tag>
                <xx-tag title="覆盖团员数" :content="LearnStatistics.socialCountBoTotalCoverLeagueMember"></xx-tag>
                <xx-tag title="覆盖青年数" :content="LearnStatistics.socialCountBoTotalCoverYouthMember"></xx-tag>
            </div>
        </el-card>
        <el-card v-loading="loading">
            <span>改革开放专题</span>
            <el-divider></el-divider>
            <el-alert
                title="按照上级要求，此处的完成数和开展数应该为1。"
                type="success"
                show-icon
                :closable="false">
            </el-alert>
            <div class="xx-tags">
                <xx-tag title="开展次数" :content="LearnStatistics.reformOpenOpenMember"></xx-tag>
                <xx-tag title="覆盖团员数" :content="LearnStatistics.reformOpenBoTotalCoverLeagueMember"></xx-tag>
                <xx-tag title="覆盖青年数" :content="LearnStatistics.reformOpenBoTotalCoverYouthMember"></xx-tag>
            </div>
        </el-card>
        <el-card v-loading="loading">
            <span>中国特色社会主义新时代专题</span>
            <el-divider></el-divider>
            <el-alert
                title="按照上级要求，此处的完成数和开展数应该为1。"
                type="success"
                show-icon
                :closable="false">
            </el-alert>
            <div class="xx-tags">
                <xx-tag title="开展次数" :content="LearnStatistics.chineseBoOpenMember"></xx-tag>
                <xx-tag title="覆盖团员数" :content="LearnStatistics.chineseBoTotalCoverLeagueMember"></xx-tag>
                <xx-tag title="覆盖青年数" :content="LearnStatistics.chineseBoTotalCoverYouthMember"></xx-tag>
            </div>
        </el-card>
        <el-card v-loading="loading">
            <span>专题生活会</span>
            <el-divider></el-divider>
            <el-alert
                title="按照上级要求，此处的完成数和开展数应该为1。"
                type="success"
                show-icon
                :closable="false">
            </el-alert>
            <div class="xx-tags" style="justify-content: center;">
                <xx-tag title="开展次数" :content="LearnStatistics.topicCountBoOpenMember"></xx-tag>
                <xx-tag title="覆盖团员数" :content="LearnStatistics.topicCountBoTotalCoverLeagueMember"></xx-tag>
            </div>
        </el-card>
    </div>
</template>

<script>
import XxTag from '../../components/XxTag.vue'
export default {
    components: {
        XxTag
    },
    data() {
        return {
            LearnStatistics: {},
            loading: true
        }
    },
    mounted() {
        this.getCustomTime()
        this.getLearnStatistics(this.getCustomTime(), this.$store.state.oid)
    },
    methods: {
        getCustomTime() {
            const now = new Date()
            return `${now.getFullYear()}-${now.getMonth() < 9 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1}-${now.getDate() < 9 ? '0' + now.getDate() : now.getDate()}`
        },
        async getLearnStatistics(date, oid, t = 1627739822840) {
            const res = await fetch(`https://tuanapi.12355.net/api/v1/admin/phles/getPartyHistoryTreeCount/${date}?date=${date}&param=${oid}&sub=0&_=${t}`, {
                headers: {
                    accept: 'application/json, text/javascript, */*; q=0.01',
                    'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
                    authorize_name: '15616656',
                    'sec-ch-ua': '"Chromium";v="92", " Not A;Brand";v="99", "Microsoft Edge";v="92"',
                    'sec-ch-ua-mobile': '?0',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-site'
                },
                referrer: 'https://tuan.12355.net/',
                referrerPolicy: 'strict-origin-when-cross-origin',
                body: null,
                method: 'GET',
                mode: 'cors',
                credentials: 'include'
            })
            const json = await res.json()
            this.LearnStatistics = json.listData[0]
            this.loading = false
            console.log(json)
        }
    }
}
</script>

<style>

</style>
